﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="Script/Interpolaters.js"></script>
    <script type="text/javascript" src="Script/RandomNoise.js"></script>
    <script type="text/javascript" src="Script/ValueNoise.js"></script>
    <script type="text/javascript" src="Script/PerlinNoise.js"></script>
    <script type="text/javascript" src="Script/SimplexNoise.js"></script>
    <script type="text/javascript" src="Script/WorleyNoise.js"></script>
    <script type="text/javascript" src="Script/SharpNoise.js"></script>


    <script>

        function processNoise(noiseFunction, testtype) {
            var output = "<table >";
            output += "<tr>";
            output += "<td></td>";
            output += "<td>300x200</td>";
            output += "<td>1024x768</td>";
            output += "<td>1600x900</td>";
            output += "<td>1280x1080</td>";
            output += "</tr>";
            
            var s300 = 0;
            var s1024 = 0;
            var s1600 = 0;
            var s1280 = 0;
            for (var i = 0; i < 10; i++) {
                output += "<tr>";
                output += "<td>Sample " + (i + 1) + "</td>";
                var x = randomNoiseNoImage(noiseFunction, 300, 200)
                s300 += x;
                output += "<td>" + x + "</td>";
                x = randomNoiseNoImage(noiseFunction, 1024, 768)
                s1024 += x;
                output += "<td>" + x + "</td>";
                x = randomNoiseNoImage(noiseFunction, 1600, 900);
                s1600 += x;
                output += "<td>" + x + "</td>";
                x = randomNoiseNoImage(noiseFunction, 1280, 1080);
                s1280 += x;
                output += "<td>" + x + "</td>";
                output += "</tr>";
            }

            output += "<tr>";
            output += "<td>Average</td>";
            output += "<td>" + s300/10 + "</td>";
            output += "<td>" + s1024/10 + "</td>";
            output += "<td>" + s1600/10 + "</td>";
            output += "<td>" + s1280/10 + "</td>";
            output += "</tr>";
            output += "</table>";
            output += "<p>" + testtype+"</p>"

            return output;
        }

        function randomNoiseNoImage(noisefunction, width, height) {
            var tx = 1.0 / (width);
            var ty = 1.0 / (height);
            var startTime = new Date().getTime();

            for (var x = 0; x < width; x++) {
                for (var y = 0; y < height; y++) {
                    var val = noisefunction((x * tx), (y * ty));
                    var r = g = b = val * 255;
                }
            }

            return new Date().getTime() - startTime;
        }

        function runTests() { 
            results.innerText += processNoise(SharpNoise.RandomNoise2D, "Table Javascript Random Noise in milliseconds");
            results.innerText += "\n";
            results.innerText += processNoise(SharpNoise.ValueNoise2D, "Table Javascript Value Noise in milliseconds");
            results.innerText += "\n";
            results.innerText += processNoise(SharpNoise.PerlinNoise2D, "Table Javascript Perlin Noise in milliseconds");
            results.innerText += "\n";
            results.innerText += processNoise(SharpNoise.SimplexNoise2D, "Table Javascript Simplex Noise in milliseconds");
            results.innerText += "\n";
            results.innerText += processNoise(SharpNoise.WorleyNoise2D, "Table Javascript Worley Noise in milliseconds");
        }
      
    </script>
</head>
<body>
    <table border:0>
        <tr><td><button onclick="runTests()" /></td></tr>
        <tr><td>Random Noise Demo 300x200</td></tr>
        <tr><td><canvas id="outputCanvas" width="300" height="200"></canvas></td></tr>
    </table>

    <div id="results">
        
    </div>
   
</body>
</html>
